<template>
	<view class="slide" :style="{ width: swiperHeight + 'rpx', height: swiperHeight + 'rpx' }">
		<swiper
			class="swiper"
			:current="swiperCurrent"
			@change="cardSwiper"
			:indicator-dots="false"
			:interval="8000"
			:duration="1000"
			indicator-color="#d2d2d2"
			indicator-active-color="#fc743b"
		>
			<swiper-item v-if="videoExist">
				<video
					class="slide-image"
					:autoplay="true"
					:muted="true"
					:show-mute-btn="true"
					:src="video_url"
					controls
					:poster="video_url + '?vframe/jpg/offset/1'"
					custom-cache="false"
					object-fit="cover"
					:picture-in-picture-mode="[]"
					:show-background-playback-button="false"
				></video>
			</swiper-item>
			<swiper-item v-for="(item, itemIndex) in imgList" :key="itemIndex">
				<image class="slide-image" :src="item.url" mode="widthFix" @load="imageLoad(itemIndex)" />
				<image class="slide-image placeholder" :class="{ loaded: item.loaded }" :src="item.url + '?imageView2/0/w/140'" mode="widthFix" />
			</swiper-item>
		</swiper>
		<div class="swiper-dot" :style="{ top: 10 + 'px' }">{{ swiperCurrent + 1 }}/{{ videoExist ? imgList.length + 1 : imgList.length }}</div>
		<!-- <div class="viodetip">
			<text>所见即所得</text>
			<text>视频验货 | 拍摄于 2025-01-02 20:52</text>
		</div> -->
	</view>
</template>

<script>
export default {
	props: {
		imgInfo: {
			type: Array,
			default: function () {
				return [];
			}
		},
		videoExist: {
			type: Boolean,
			default: !1
		},
		video_url: {
			type: String,
			default: ''
		},
		current: {
			type: [Number, String],
			default: 0
		},

		swiperHeight: {
			type: [Number, String],
			default: 694
		}
	},
	data: function () {
		return {
			imgList: [],
			swiperCurrent: 0
		};
	},
	watch: {
		imgInfo: {
			deep: !0,
			immediate: !0,
			handler: function (e) {
				var t = this;
				this.imgList = [];
				this.$nextTick(function () {
					t.imgList = e.map(imgurl => {
						let item = {
							url: imgurl,
							loaded: false
						};
						return item;
					});
				});
			}
		},
		current: {
			deep: !0,
			immediate: !0,
			handler: function (e) {
				this.$nextTick(function () {
					this.swiperCurrent = e;
				});
			}
		}
	},
	methods: {
		imageLoad(index) {
			this.imgList[index].loaded = true;
		},
		cardSwiper(e) {
			this.swiperCurrent = e.detail.current;
		}
	}
};
</script>

<style lang="scss" scoped>
.slide {
	position: relative;
	margin: 0 auto;
	border-radius: 25rpx;
	overflow: hidden;
	.viodetip {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: #009944;
		font-size: 28upx;
		color: #ffff00;
		padding: 12upx 8upx;
		white-space: nowrap;
		text-align: center;
		text + text {
			color: #fff;
			margin-left: 20upx;
		}
	}
}

.swiper {
	width: 100%;
	height: 100%;
	position: relative;
	transform: translateY(0);
	border-radius: 25rpx;
	overflow: hidden;
	.placeholder {
		opacity: 1;
		transition: opacity 0.4s linear;
	}
	.placeholder.loaded {
		opacity: 0;
	}
	.slide-image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		overflow: hidden;
		border-radius: 25rpx;
	}
	image {
		display: block;
		width: 100%;
	}
}
.swiper-dot {
	position: absolute;
	right: 20rpx;
	top: 20rpx;
	background: rgba(255, 255, 255, 0.76);
	color: #a2a2a2;
	border-radius: 8upx;
	line-height: 40rpx;
	padding: 0 20rpx;
	font-size: 24upx;
}
</style>
